import React, { Component } from 'react';
import './index.scss';

export default class OverviewTitle extends Component {
  fixedDiv = React.createRef();

  state = {
    animateClassName: 'opacity0',
  };

  componentDidMount() {
    const container = document.getElementById('container');
    container.addEventListener('scroll', this.onScroll);
  }

  onScroll = () => {
    const container = document.getElementById('container');
    const header = document.querySelector('.mr-detail-content-header');
    if (!container || !header) {
      return;
    }
    if (container.scrollTop > header.getBoundingClientRect().height) {
      this.setState({
        animateClassName: 'slideInDown opacity1',
      });
    } else {
      this.setState({
        animateClassName: 'slideOutUp',
      });
    }
  };

  componentWillUnmount() {
    const container = document.getElementById('container');
    container.removeEventListener('scroll', this.onScroll);
  }

  render() {
    const { children } = this.props;
    const { repoSize, repoLimitSize } = window.FORCE.pathResource;
    const isTooLarge = Number(repoSize) >= Number(repoLimitSize || 2048);
    return (
      <div
        className={`mr-title-fix ${this.state.animateClassName}`}
        ref={this.fixedDiv}
        style={{ top: isTooLarge ? 130 : 90 }}
      >
        {children}
      </div>
    );
  }
}
